<template>
    <div class="drawList-box">
        <my-header :title="title"></my-header>

        <!-- <img src="https://img5.jianke.com/mall/vmall/index/201905/91d06394799d47cda6c104a831930770.jpg?imageMogr2/format/jp2" alt=""> -->

        <div class="header">
            <img src="https://img5.jianke.com/mall/vmall/index/201812/64e58ff0c1a04fba80a87b9f969757fd.png?imageMogr2/format/jp2" alt="">
            <man-swiper></man-swiper>
        </div>
        <div class="content">
            <img src="https://img.jianke.com/mall/vmall/index/201810/b8c61f7fabd340439f14e243d1121310.png?imageMogr2/format/jp2" alt="">
            <ul>
                <van-tabs @click="onClick">
                    <van-tab v-for="(value, index) in content" :title="value" :key="index">
                            <div class="recommend-list">
                                <div class="rl-item" v-for="(value, index) in arr" :key="index">
                                    <router-link :to="'/product/' + value.productCode">
                                        <div class="wrap">
                                            <img :src="value.productImageUrl" alt="">
                                            <div class="rl-text">
                                                <span class="name">{{ value.productName }}</span>
                                                <span class="info">{{ value.introduction }}</span>
                                                <p class="list-price">
                                                    <span class="price-left">
                                                        <em>￥</em>
                                                        {{ parseInt(value.productPrice/100) + '.00' }}
                                                    </span>
                                                    <span class="price-right">立即购买</span>
                                                </p>
                                            </div>
                                        </div>
                                    </router-link>
                                </div>
                            </div>
                    </van-tab>
                </van-tabs>
            </ul>
        </div>
    </div>
</template>

<script>
import myHeader from 'Components/common/myHeader'
import manSwiper from './man-swiper'
import {mapActions, mapGetters} from 'vuex'

export default {
    data() {
        return {
            title: '男性',
            content: ['阳痿早泄','肾虚肾亏','前列腺炎','肾炎肾病','不育'],
            moblie5List: [],
            moblie5List1: [],
            moblie5List2: [],
            moblie5List3: [],
            moblie5List4: [],
            arr: [],
        }
    },
    components: {
        myHeader,manSwiper
    },
    methods: {
        onClick(index, title) {
            switch(title) {
                case '阳痿早泄':
                    return this.arr = this.moblie5List;
                case '肾虚肾亏':
                    return this.arr = this.moblie5List1;
                case '前列腺炎':
                    return this.arr = this.moblie5List2;
                case '肾炎肾病':
                    return this.arr = this.moblie5List3;
                case '不育':
                    return this.arr = this.moblie5List4;
            }

        },
        handleScroll () {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            let offsetTop1 = document.querySelector('.van-tabs__wrap') && document.querySelector('.van-tabs__wrap').offsetTop;
            document.querySelector('.van-tabs__wrap') && scrollTop > offsetTop1 ? document.querySelector('.van-tabs__wrap').style.position="fixed" : document.querySelector('.van-tabs__wrap').style.position="absolute"
        },
        ...mapActions(['getMobile5'])
    },
    computed: {
        ...mapGetters(['getMobile5s'])
    },
    async mounted () {
        await this.getMobile5('192137,220778,3669,10713,287096,287097,287098,514234,818498,475907,858002,858038,220793,11316,843784,758157,857695,856337,854072,301337,859064,858212,858435,514235,10867');
        this.moblie5List = this.getMobile5s && this.getMobile5s || [];
        this.arr = this.moblie5List

        await this.getMobile5('11692,11929,207422,269069,52836,9647,202465,710515,846823,1555,675,559,160028,439028,7159,849265,772528,9784,781146,50772,207440,857166');
        this.moblie5List1 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('806512,155883,3397,764808,1462,2477,14286,730605,221112,159784,212037,226592,826433,5514,1652,10581,779025,764806,169197,823174,831344');
        this.moblie5List2 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('168611,158485,12381,11995,3809,170700,420571,803794,5184,181193,580465,840335,2318,179566,182035,192102,745383,180175,821152,700714');
        this.moblie5List3 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('155530,154453,4450,52735,9230,183899,524996,177342,204498,697117,2407,158099,158717,209586,164912,816964');
        this.moblie5List4 = this.getMobile5s && this.getMobile5s || [];

        // 改变背景颜色
        // document.querySelector('.van-nav-bar__title').style.color = '#ffffffcc';
        // document.querySelector('.van-icon').style.color = '#ffffffcc';
        // document.querySelectorAll('.van-icon')[1].style.color = '#ffffffcc';
        // document.querySelector('.van-hairline--bottom').style.background = 'rgb(7, 82, 114)';
        // document.querySelector('.van-hairline--bottom').style.opacity = '0.9'

        // 获取滚动距离
        window.addEventListener('scroll', this.handleScroll)
        
    }
}
</script>

<style lang="scss" scoped>
    @import 'Css/common-clounm.scss';

    a {
        color: #333;
    }

    .van-nav-bar {
        z-index: 9999 !important;
    }
    .van-tabs--line .van-tabs__wrap {
        height: .46rem !important;
    }

    .recommend-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        background-color: #f5f5f5;
        padding: 0rem 0.05rem;
        .wrap {
            background: #fff !important;
        }
    }

    img {
        width: 100%;
        vertical-align: middle;
    }
</style>

